<template>
  <div id="flight-editor">
    <div class="title">
      欢迎您，管理员
    </div>
    <el-main>
      <el-form :model="flightInfo">
        <div class="flex j-s">
          <div>
            <el-form-item label="航班号">
              <el-input v-model="flightInfo.flightName" placeholder="请输入航班号" :readonly="forChange"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="起飞城市">
              <el-input v-model="flightInfo.startPos" placeholder="请输入起飞城市" :readonly="forChange"></el-input>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="到达城市">
              <el-input v-model="flightInfo.endPos" placeholder="请输入到达城市" :readonly="forChange"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-divider content-position="center">基 本 信 息</el-divider>
        <el-form-item label="出发机场" class="place-info">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-input v-model="flightInfo.startAir" placeholder="请输入出发机场" :readonly="forChange"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="到达机场" class="place-info">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-input v-model="flightInfo.endAir" placeholder="请输入到达机场" :readonly="forChange"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <div class="flex j-s">
          <el-form-item label="飞行时间">
            <el-date-picker v-model="flightInfo.flightTime" type="datetimerange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="持续次数">
            <el-input v-model="flightInfo.dura" placeholder="请输入持续次数" type="number" :readonly="forChange"></el-input>
          </el-form-item>
        </div>
        <el-divider content-position="center">座 位 信 息</el-divider>
        <div :key="index" v-for="(item,index) in flightInfo.seatInfo" class="seat-info">
          <div class="flex j-s">
            <div>
              <el-form-item label="机舱类型">
                <el-input v-model="item.type" placeholder="座位类型" :readonly="forChange"></el-input>
              </el-form-item>
            </div>
            <img src="../assets/ticket-logo.jpg" height="75px">
            <div v-if="false">
              <el-button id="add-seat" type="success" icon="el-icon-plus" @click="addSeat()"></el-button>
              <el-button type="danger" @click="removeSeat(index)" icon="el-icon-delete"></el-button>
            </div>
          </div>
          <el-form-item label="参数">
            <el-row :gutter="10">
              <el-col :span="4">
                <el-input v-model="item.maxSeat" type="number" placeholder="座位数" :readonly="forChange">
                  <template slot="append">座</template>
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-input v-model="item.length" type="number" placeholder="座椅长度" :readonly="forChange">
                  <template slot="append">cm</template>
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-input v-model="item.wide" type="number" placeholder="座椅宽度" :readonly="forChange">
                  <template slot="append">cm</template>
                </el-input>
              </el-col>
              <el-col :span="4">
                <el-input v-model="item.price" type="number" placeholder="价格" :readonly="forChange">
                  <template slot="append">元</template>
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="服务">
            <el-checkbox v-model="item.passenger_services.dining" label="堂食" :disabled="forChange"></el-checkbox>
            <el-checkbox v-model="item.passenger_services.charging_port" label="充电插口" :disabled="forChange">
            </el-checkbox>
            <el-checkbox v-model="item.passenger_services.ceiling_tv" label="天花板式tv" :disabled="forChange">
            </el-checkbox>
          </el-form-item>
        </div>
      </el-form>
    </el-main>
    <el-divider></el-divider>
    <div>
      <el-button icon="el-icon-upload2" type="primary" plain @click="submit" style="width:200px" :disabled="inAdding"
        :loading="inAdding">提 交
      </el-button>
      <el-button plain icon="el-icon-close" @click="cancel" style="width:200px">取 消</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "FlightEditor",
  props: {
    flightData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      inAdding: false,
      airportInfo: {
        citys: [],
        airports: []
      },
      flightInfo: {
        flightName: "",
        airline_company: "厦门航空",
        plane_model: "空客A320",
        startAir: "",
        endAir: "",
        dura: 1,
        flightTime: [],
        startPos: "北京",
        endPos: "吉隆坡",
        seatInfo: [
          {
            type: "经济舱",
            maxSeat: 100,
            leftSeat: 100,
            length: 50,
            wide: 50,
            price: 500,
            passenger_services: {
              ceiling_tv: false,
              charging_port: false,
              dining: false
            }
          }
        ]
      }
    };
  },
  methods: {
    cancel() {
      this.$emit("cancel-edit");
    },
    submit() {
      if (this.flightData == null) this.submitAdd();
      else this.submitChange();
    },
    submitChange() {
      // 修改航班时间
      if(this.flightData.flightTime[0] == ""||this.flightData.flightTime[1] == ""){
        alert('请正确选择时间')
        return
      }
      var data = {
        flightId: this.flightData.flightId,
        startTime: this.flightData.flightTime[0],
        endTime: this.flightData.flightTime[1]
      };
      axios
        .post(this.$GLOBAL.localHost + "Admin/changetime/", data)
        .then(res => {
          if (res.data.success == 1) {
            this.$message({
              message: "修改航班成功",
              type: "success"
            });
            this.cancel();
          } else {
            this.$message({
              message: "修改航班失败",
              type: "error"
            });
          }
          this.inAdding = false;
        })
        .catch(error => {
          console.log(error);
          this.$message({
            message: "服务器开小差了，修改失败",
            type: "error"
          });
          this.cancel();
        });
    },
    submitAdd() {
      this.inAdding = true;
      var data = {
        flightName: this.flightInfo.flightName,
        dura: this.flightInfo.dura,
        startPos: this.flightInfo.startPos,
        endPos: this.flightInfo.endPos,
        startTime: this.flightInfo.flightTime[0],
        endTime: this.flightInfo.flightTime[1],
        price: this.flightInfo.seatInfo[0].price,
        maxSeat: this.flightInfo.seatInfo[0].maxSeat,
        leftSeat: this.flightInfo.seatInfo[0].maxSeat,
        startAir: this.flightInfo.startAir,
        endAir: this.flightInfo.endAir
      };
      if (
        data.flightName == "" ||
        data.dura <= 0 ||
        data.startPos == "" ||
        data.endPos == "" ||
        data.startTime == "" ||
        data.endTime == "" ||
        data.price <= 0 ||
        data.maxSeat <= 0 ||
        data.leftSeat > data.maxSeat ||
        data.startAir == "" ||
        data.endAir == ""
      ) {
        this.$notify.error({
          title: "错误",
          message: "航班信息不合法"
        });
        this.inAdding = false;
        return;
      }
      axios
        .post(this.$GLOBAL.localHost + "Admin/add/", data)
        .then(res => {
          if (res.data.success == 1) {
            this.$message({
              message: "添加航班成功",
              type: "success"
            });
            this.cancel();
          } else {
            this.$message({
              message: "添加航班失败",
              type: "error"
            });
          }
          this.inAdding = false;
        })
        .catch(error => {
          console.log(error);
          this.$message({
            message: "服务器开小差了，添加失败",
            type: "error"
          });
          this.inAdding = false;
          this.cancel();
        });
    },
    initUI(newVal) {
      console.log(newVal);
      if (newVal != null) {
        this.flightInfo = {
          flightName: newVal.flightName,
          startAir: newVal.startAir,
          endAir: newVal.endAir,
          dura: 1,
          flightTime: [],
          startPos: newVal.startPos,
          endPos: newVal.endPos,
          seatInfo: [
            {
              type: "经济舱",
              maxSeat: newVal.maxSeat,
              leftSeat: newVal.leftSeat,
              length: 50,
              wide: 50,
              price: newVal.price,
              passenger_services: {
                ceiling_tv: false,
                charging_port: false,
                dining: false
              }
            }
          ]
        };
        this.flightInfo.flightTime[0] = new Date(newVal.startTime);
        this.flightInfo.flightTime[1] = new Date(newVal.endTime);
      } else {
        this.flightInfo = {
          flightName: "",
          startAir: "",
          endAir: "",
          dura: 1,
          flightTime: [],
          startPos: "北京",
          endPos: "吉隆坡",
          seatInfo: [
            {
              type: "经济舱",
              maxSeat: 100,
              leftSeat: 100,
              length: 50,
              wide: 50,
              price: 500,
              passenger_services: {
                ceiling_tv: false,
                charging_port: false,
                dining: false
              }
            }
          ]
        };
      }
    },
    //以下均尚未实装
    addSeat() {
      var data = {
        type: "经济舱",
        capacity: 100,
        length: 50,
        wide: 50,
        price: 500,
        passenger_services: {
          ceiling_tv: false,
          dining: false,
          charging_port: false
        }
      };
      this.flightInfo.seat_info.push(data);
    },
    removeSeat(index) {},
    getFlightData() {
      // 后台获取航班信息(修改航班时用)

      if (this.flightInfo.flightId !== "-1") {
        console.log("从后台获取航班数据");
      } else {
        console.log("新建航班");
      }
    },
    getCityData() {
      // 后台获取城市信息
    },
    getAirportData() {
      // 后台获取机场信息
    },
    deleteFlight() {
      // 删除该航班
    }
  },
  mounted() {
    this.initUI(this.flightData);
  },
  computed: {
    // 判断是否修改时间
    forChange: function() {
      return this.flightData != null;
    },
    cascadedAirports: function() {
      return [
        {
          value: "beijing",
          label: "北京",
          children: [
            {
              value: "daxing",
              label: "大兴机场"
            }
          ]
        },
        {
          value: "nanning",
          label: "南宁",
          children: [
            {
              value: "wuxu",
              label: "吴圩机场"
            }
          ]
        }
      ];
    }
  },
  watch: {
    flightData(newVal, oldVal) {
      this.initUI(newVal);
    }
  }
};
</script>

<style>
#flight-editor {
  border: 2px solid #999;
  padding: 10px;
  margin: 10px;
}
.flex {
  display: flex;
}
.j-s {
  justify-content: space-between;
}
.a-c {
  align-items: center;
}
.seat-info {
  margin: 10px;
  padding: 10px;
  border: 1px solid #999;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.place-info {
  margin: 10px 0;
}
.title {
  font-weight: bolder;
  font-size: 36sp;
}
</style>